<template>
    <view :style="style_item" class="cu-item" :class="[right_icon=='arrow'?'arrow':'', class_item?class_item:'']" @tap="_tap">
        <view v-if="left_icon && left_icon != 'arrow'" class="action margin-right-10" :class="class_left">
            <text class="text-deep-nddyny" :class="left_icon"></text>
        </view>
        <view class="content flex">
            <text v-if="icon" :class="icon" class="text-deep-nddyny"></text>
            <text :class="class_title" class="text-cut-1">{{title}}</text>
        </view>
        <view v-if="right_icon && right_icon != 'arrow'" class="action">
            <text class="text-deep-nddyny" :class="right_icon"></text>
        </view>
        <slot name="right"></slot>
        <view v-if="right_icon=='arrow' && arrow_title" class="action text-nddyny" style="margin-right: -20rpx;">
            {{arrow_title}}
        </view>
    </view>
</template>

<script>
    export default {
        props: [
            'uri', 'tap', 'icon', 'title', 'right_icon', 'class_title', 
            'arrow_title', 'left_icon', 'class_item', 'style_item', 'class_left',
        ],
        data() {
            return {}
        },
        methods: {
            _tap() {
                if (this.tap) {
                    this.tap();
                }
                if (this.uri) {
                    this.$store.commit('userNavTo', this.uri);
                }
            }
        }
    }
</script>
